<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<view class="topBar">
			<view class="topBar-text">
				每天刷一遍
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="middle">
			<!-- 集-显示 -->
			<view class="collection">
				<view class="collection-item" style="" v-for="item in collection_list" :key="item.id" @click="showOpt(item.id)">
						<text>{{item.name}}</text>
				</view>
			</view>
			
			
		</view>
		<view class="opt">
			<!-- 刷英文 -->
			<view class="opt-item" @click="read(1)" :class="{'opt-item-animation': isShowOpt}" style="background-color: #00a0e9;transition: transform .2s;">
				刷英文
			</view>
			<!-- 刷中文 -->
			<view class="opt-item" @click="read(2)" :class="{'opt-item-animation': isShowOpt}" style="background-color: #13b5b1;transition: transform .5s;">
				刷中文
			</view>
			<!-- 刷发音 -->
			<view class="opt-item" @click="read(3)" :class="{'opt-item-animation': isShowOpt}" style="background-color: #80c269;transition: transform .8s;">
				刷发音
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="mask" v-show="isShowOpt" @click="isShowOpt=false"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collection_list : [],
				current_id:0,
				isShowOpt:false
			
			}
		},
		onLoad() {
			this.getCollection()
		},
		methods: {
			async getCollection() {
				// uni.request({
				// 	url:this.baseUrl + "collection/getList",
				// 	success: (res) => {
				// 		if (res.data.code == 200){
				// 			this.collection_list = res.data.data
				// 		}
				// 	}
				// })
				const res = await this.$Request({
					url:"collection/getList"
				})
				this.collection_list = res.data.data
			},
			showOpt(id) {
				this.current_id = id
				// 弹出选项
				this.isShowOpt = true
			},
			read(mode) {
				// 1 刷英文 2 刷中文 3 刷发音
				uni.navigateTo({
				    url: `../read/read?mode=${mode}&collection_id=${this.current_id}`
				});
				
			}
		}
	}
</script>

<style>
	.topBar{
		width: 100%;
		height: calc(var(--status-bar-height) + 120rpx);
		background-color: #0F4C81;
		display: flex;
		align-items: center;
		position: relative;
	}
	
	.topBar-text{
		color: white;
		position: absolute;
		bottom: 10px;	
		left: 10px;
		font-size: 20px;
	}
	.collection{
		margin: 43rpx 33rpx;
		display: flex;
		flex-wrap:wrap;
	}
	.collection-item{
		background-image: url(@/static/book.png);
		height: 282rpx;
		width: 230rpx;
		background-size: contain;
		background-repeat: no-repeat;
		position: relative;
		/* 处理边界 */
		margin-bottom: 40rpx;
		margin-right: 100rpx;
	}
	.collection-item text{
		position: absolute;
		top:40rpx;
		left: 13rpx;
		right: 40rpx;
		
	}
	.opt{
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
		z-index: 2;
	}
	.opt-item{
		width: 210rpx;
		height: 87rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		transform: translateX(150px);
		

	}
	.mask{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.7);
		z-index: 1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.opt-item-animation{
		transform: translateX(0px);
	}
	
</style>
